import { Card } from 'antd';
import React from 'react';
import { Pie } from '@ant-design/plots';
import { useRequest } from 'ahooks';
import { queryRuntime } from '@/service/monitor';

const RatioCard = () => {
  const { data = [] } = useRequest(() => queryRuntime({ "source": "ratio" }))
  // const data = [
  //   {
  //     type: '分类一',
  //     value: 27,
  //   },
  //   {
  //     type: '分类二',
  //     value: 25,
  //   },
  //   {
  //     type: '分类三',
  //     value: 18,
  //   },
  //   {
  //     type: '分类四',
  //     value: 15,
  //   },
  //   {
  //     type: '分类五',
  //     value: 10,
  //   },
  //   {
  //     type: '其他',
  //     value: 5,
  //   },
  // ];
  const config:any = {
    appendPadding: 5,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [
      {
        type: 'pie-legend-active',
      },
      {
        type: 'element-active',
      },
    ],
  };
  return (<Pie {...config} />)
}
export default RatioCard